<template>
  <div class="timer timer-w">
    <div class="timer-item">
      时间
      <el-select
        v-model="value"
        class="m-2"
        placeholder="Select"
        style="width: 80px"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        /> </el-select
      >分钟
    </div>
    <div class="timer-item">
      <el-button @click="start">开始</el-button>
      <el-button @click="pause">暂停</el-button>
      <el-button @click="continues">继续</el-button>
      <el-button @click="stop">停止</el-button>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { commTime } from "@/api/source.js";

const value = ref(30);
const options = [
  {
    value: "30",
    label: "30",
  },
  {
    value: "45",
    label: "45",
  },
  {
    value: "60",
    label: "60",
  },
  {
    value: "90",
    label: "90",
  },
];
// 开始
const start = async () => {
  let parm = {
    action: 2,
    time: Number(value.value) * 60,
  };
  await commTime(parm)
    .then((res) => {
      // console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
};
// 暂停
const pause = async () => {
  let parm = {
    action: 3,
    time: Number(value.value) * 60,
  };
  await commTime(parm)
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
};
// 继续
const continues = async () => {
  let parm = {
    action: 4,
    time: Number(value.value) * 60,
  };
  await commTime(parm)
    .then((res) => {
      // console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
};
// 停止
const stop = async () => {
  let parm = {
    action: 0,
    time: Number(value.value) * 60,
  };
  await commTime(parm)
    .then((res) => {
      // console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style lang="scss" scoped>
.timer {
  width: 500px;
  margin: 0 auto;
  .timer-item {
    text-align: center;
    margin-top: 4.5rem;
  }
  .el-button {
    height: 50px;
    width: 100px;
  }
}
</style>
